<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表，前后端对接</title>
    <!--引入vue组件-->
    <script src="/js/vue.js"></script>
    <!--引入一款异步请求的插件：axios，用于发送异步请求-->
    <script src="/js/axios.js"></script>
</head>
<body>

    <div id="app">
        <table border="1">
            <tr>
                <td>文章标题</td>
                <td>文章内容</td>
                <td>文章作者</td>
            </tr>
            <tr v-for="article in articles">
                <td>{{article.title}}</td>
                <td>{{article.content}}</td>
                <td>{{article.user.name}}</td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    articles:[]
                }
            },
            methods:{
                loadAll(){
                    let pageData = {
                        params:{  // get请求携带路径参数，这里的key要是params，固定的。
                            pageNum:2,
                            pageSize:2
                        }
                    };
                    // 参数1：请求路径；参数2：请求数据，是一个json对象
                    // resp 表示返回的对象
                    axios.get('/article/page',pageData).then(resp=>{
                        console.log(resp);
                        this.articles = resp.data.list;
                    })
                }
            },
            created(){
                this.loadAll();
            }
        })
    </script>

</body>
</html>